<div class="app-container with-navbar with-tabbar" ng-controller="ProductController">



    <div class="navbar fixed-top">

        <div class="navbar-left hide-weixin" ng-click="goBack()">

            <img class="button-icon" src="image/nav-left.png"/>

            <!-- div class="button-text">返回</div -->

        </div>

        <div class="navbar-title">

            {{product.name}}

        </div>

    </div>



    <div class="app-content">

        <!-- Photo -->

        <div class="product-flash swiper-container" ng-if="isLoaded && product">

            <div class="swiper-wrapper">

                <div class="flash-slide swiper-slide" ng-repeat="photo in product.photos track by $index" ng-click="touchPhoto(photo)">

                    <img class="slide-image" ng-src="{{photo.large}}"/>

                </div>

                <div class="flash-slide swiper-slide" ng-if="!product.photos || !product.photos.length">

                    <img class="slide-image" ng-src="image/default-photo.png"/>

                </div>

            </div>

            <div class="swiper-pagination" ng-if="product.photos && product.photos.length > 1"></div>

        </div>



        <!-- Info -->

        <div class="product-info" ng-if="isLoaded && product">

            <div class="info-name">

            	<span style="font-size: 20px; color: #000;">{{product.name}}</span>

            	<br><span style="font-size: 14px; color: #6f6f6f; line-height: 2;">{{product.brief}}</span>

            </div>

            <div class="info-price" style="margin-top: 2px;">

                <span class="price-shop" ng-class="{danger: currentStock}" style="font-size: 20px; color: red;">{{currentSelectedPrice| currency:"￥"}}</span>

                <span class="price-market">{{product.price| currency:"￥"}}</span>

            </div>
            <div style="color: #bbbbbb;font-size: 0.32rem;padding: 0.2rem 0 0.4rem 0;">
                <span class="block">已售卖<em> {{product.virtual_sales}} </em>笔</span>
            </div>
            

        </div>



        <!-- Attr -->
        <div class="product-attr" ng-if="isLoaded && product && product.properties && product.properties.length && product.good_stock">

            <div class="attr-group" ng-repeat="property in product.properties track by $index">

                <div class="group-name">{{property.name}}</div>

                <div class="group-items">

                    <div class="group-item" ng-class="{active: isAttrSelected(value)}" ng-repeat="value in property.attrs track by $index" ng-click="touchAttr(property,value)">

                        {{value.attr_name}}

                        <span ng-if="value.attr_price > 0">

                            (加{{value.attr_price| currency:"￥"}})

                        </span>

                    </div>

                </div>

                <div class="attr-line" ng-if="attr !== product.attrs[product.attrs.length-1]"></div>

            </div>

        </div>



        <!-- Amount -->

        <div class="product-amount" ng-if="isLoaded && product && product.good_stock">

            <div class="amount-name">数量</div>

            <div class="amount-input" ng-class="{active: canPurchase}">

                <div class="input-button" ng-class="{active: input.currentAmount > 1}" ng-click="touchAmountSub()">

                    <img src="image/ind-sub.png">

                </div>

                <input type="text" class="input-count" ng-class="{active: input.currentAmount > 0}" ng-model="input.currentAmount"  ng-change="refreshAmount()">

                </input>

                <div class="input-button" ng-class="{active: input.currentAmount > 0}" ng-click="touchAmountAdd()">

                    <img src="image/ind-add.png">

                </div>

            </div>

        </div>



        <!-- Comment -->

        <div class="product-comment" ng-if="isLoaded && product && comments && comments.length">

            <div class="comment-header" ng-click="touchComments()">

                <img class="header-arrow" src="image/nav-right.png"/>

                <div class="header-title">商品评价（{{comments.length}}）</div>

            </div>

            <div class="comment-item" ng-repeat="comment in comments track by $index" ng-click="touchComment(comment)">

                <div class="item-info">

                    <span class="user">{{comment.is_anonymous ? '匿名用户' : comment.author.nickname}}</span>

                    <span class="rate">{{formatGrade(comment.grade)}}</span>

                    <span class="time">{{comment.created_at | localTime}}</span>

                </div>

                <div class="item-body">

                    {{comment.content}}

                </div>

                <div class="comment-line" ng-if="comment !== comments[comments.length-1]"></div>

            </div>

        </div>



        <!-- Introduction -->

        <div class="product-intro" ng-if="isLoaded && product">

            <div class="intro-header">

                产品详情

            </div>

            <div class="intro-content" style="padding: 0px;" ng-bind-html="(product.goods_desc || '没有产品详情') | trustHtml">

            </div>

        </div>



        <!-- Submit -->



        <div class="product-submit fixed-bottom" ng-if="isLoaded && product">

            <div class="submit-cart" ng-click="touchCart()">

                <img class="cart-icon" src="image/ind-cart.png">

                <div class="cart-badge" ng-if="cartModel.total > 0">

                    {{cartModel.total}}

                </div>

            </div>

            <div class="submit-button" ng-class="{active: canPurchase}" ng-click="touchAddCart()">

                加入购物车

            </div>

            <div class="submit-button" style="background-color: red; color: #ffffff;" ng-class="{active: canPurchase}" ng-click="touchPurchase()">

                立即购买

            </div>

        </div>



        <!-- Tips -->

        <div class="product-tips" ng-if="isLoaded && product && !product.good_stock">

            所选商品暂时无货，非常抱歉！

        </div>



    </div>



</div>

